<!DOCTYPE html>
<html>

<meta charset="utf-8"> 
<head>
	<title data-localize="stove.title">烧结炉</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
body{
	margin: 0;
	padding: 0;
}
p{
	margin: 0;
}
.u-line{
	margin: 0 auto;
	width: 100%;
    height: 988px;
    margin-top: 20px;
    overflow: hidden;
}
.u-road{
	position: relative;
	height: 100%;
	width: 1400px;
	float: left;
}
.u-info{
	float: left;
	height: 98%;
	width: 18%;
	margin-left: 5%;
	border: 1px solid #aaa;
}
.u-info h2,.u-info p{
	margin-left: 20px;
}
.u-table{
	float: left;
	width: 71.8%;
	height: 100%;
	margin-left: 5%;
}
.u-table p{
	line-height: 20px;
	text-align: center;
}
.up-con{
	width: 100%;
	height: 320px;
}
.stovepicbox{
	width: 100%;
	height: 11%;
	margin: 36px 0;
	overflow: hidden;
}
.stovepicbox span{
	margin: 0 10px;
}
.u-temp{
	position: relative;
	width: 5%;
	height: 100%;
	float: left;
	margin-right: 1.6%;
}
.u-temp:last-child{
	margin-right: 0;
}
.tempbar{
	position: absolute;
	left: 0;
	bottom: 20px;
	height: 220px;
	width: 100%;
	background: #f33368;
	overflow: visible!important;
}
.tempbar p{
	position: absolute;
	width: 100%;
}
.tempbar .maxtemp{
	left: 0;
	top: -20px;
}
.tempbar .mintemp{
	left: 0;
	bottom: -20px;
}
.tempbar .bottomtemp{
	left: 0;
	bottom: -40px;
}
.tempbar .endtemp{
	left: 0;
	bottom: -60px;
}

.u-upbox{
	width: 100%;
	height: 42px;
	background: #8bc34a;
	border: 1px solid #555;
	box-sizing: border-box;
}
.u-mac{
	position: relative;
	width: 100%;
	height: 116px;
	overflow: hidden;
}
.u-mac .u-boxcon{
	margin-top: 17px;
}
.u-mac .u-stovebox{
	margin-top: 0;
}
.down-con{
	position: relative;
	width: 100%;
	height: 320px;
	margin-top: 0;
}
.down-left{
	float: left;
	height: 100%;
	width: 36%;
}
.down-right{
	float: left;
	height: 100%;
}
.down-con .u-temp:first-child{
	margin-left: 46.8%;
}
.u-board{
	position: absolute;
	width: 20%;
	left: 13.4%;
	top: 30px;
}
.u-board p{
	text-align: left;
	margin-left: 20px;
	line-height: 30px;
	font-size: 18px;
}
.rest{
	background: #666;
}
.u-stovebox{
	position: relative;
	float: left;
	background: #fff;
	width: 570px;
	height: 100px;
	margin-top: 48px;
	border: 3px solid #29abe2;
	text-align: center;
	line-height: 100px;
	margin-left: 80px;
	z-index: 14;
}
.u-mac .u-boxcon{
	position: absolute;
	margin-left: 0;
	top: 0;
}
.u-mac .u-boxcon:nth-child(1){
	left: 0px;
}
.u-mac .u-boxcon:nth-child(2){
	left: 550px;
}
.u-mac .u-boxcon:nth-child(3){
	left: 670px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="back">回到首页</div></a>
	<h3 data-localize="stove.title">烧结炉</h3>
	<div class="changeLang">
		<p class="u-lang"><span>中文</span><span>English</span></p>
	    <div isopen="true" class="changeLangBtn"></div>
	</div>
</div>
</div>
<div class="u-cachecon">
<div class="u-cachelist">
</div>
</div>
<div class="u-line">
	<div class="u-road mainroad">
		<div class="u-boxcon u-boxconspe" id="u-boxe"><div class="u-box u-boxe"></div></div>
		<div class="u-info">
			<h2 data-localize="stove.info_title">状态区域</h2>
			<div class="u-errorlist">
				<h3>异常一览：</h3>
				<div class="u-errorlistcon">
				</div>
			</div>
			<p class="status"><span data-localize="drying.running">运行状态：</span><span class="u-cube t-status"></span></p>
			<p class="status"><span data-localize="stove.info_status1">当前硅片翘曲值：</span><span class="s-p5"></span></p>
			<p class="status"><span data-localize="stove.info_status2">当前出炉温度：</span><span class="s-p6"></span></p>
			<p class="status"><span data-localize="stove.info_status3">炉内片数：</span><span class="s-p7"></span></p>
		</div>
		<div class="u-table">
			<div class="u-mac">
				<div class="u-boxcon"><div class="u-box u-box1 printed"><p></p></div></div>
				<div class="u-boxcon"><div class="u-box u-box2 printed"><p></p></div></div>
				<div class="u-boxcon"><div class="u-box u-box2 printed"><p></p></div></div>
				<div class="u-stovebox"></div>
			</div>
			<div class="up-con">
				<div class="u-temp s-u1"><div class="u-upbox"></div><p>上1</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.1</p><p class="bottomtemp">250.2</p><p class="endtemp">250.4</p></div></div>
				<div class="u-temp s-u2"><div class="u-upbox"></div><p>上2</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u3"><div class="u-upbox"></div><p>上3</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u4"><div class="u-upbox"></div><p>上4</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u5"><div class="u-upbox"></div><p>上5</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u6"><div class="u-upbox"></div><p>上6</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u15"><div class="u-upbox"></div><p style="width: 66px;">辅助加热</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="bottomtemp">250.0</p><p class="mintemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u7"><div class="u-upbox"></div><p>上7</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u8"><div class="u-upbox"></div><p>上8</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u9"><div class="u-upbox"></div><p>上9</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u10"><div class="u-upbox"></div><p>上10</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u11"><div class="u-upbox"></div><p>上11</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u12"><div class="u-upbox"></div><p>上12</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u13"><div class="u-upbox"></div><p>上13</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
				<div class="u-temp s-u14"><div class="u-upbox"></div><p>上14</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.0</p></div></div>
			</div>
			<div class="stovepicbox">
				<p><span class="p5">300</span>排废口实际温度<span class="p5">400</span><span style="margin-left: 60px;" class="p5">300</span>排废口实际温度<span class="p5">400</span></p>
				<p><span class="p5">300</span>排废口报警温度<span class="p5">400</span><span style="margin-left: 60px;" class="p5">300</span>排废口报警温度<span class="p5">400</span></p>
				<p><span class="p5">300</span>排废口报警温度<span class="p5">400</span><span style="margin-left: 60px;" class="p5">300</span>排废口报警温度<span class="p5">400</span></p>
				<img src="image/stove.png" alt="">
			</div>
			<div class="down-con">
				<div class="u-temp s-d1"><div class="u-upbox"></div><p>下7</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.4</p></div></div>
				<div class="u-board">
					<p><span data-localize="stove.speed">当前速度：</span><span class="s-p8">50.0</span>米/秒</p>
					<p><span data-localize="stove.maxspeed">速度设定：</span><span class="s-p9">50.0</span>米/秒</p>
					<br>
					<p><span data-localize="stove.rate1">当前频率：</span><span class="s-p10">50.0</span>Hz</p>
					<p><span data-localize="stove.maxrate1">频率设定：</span><span class="s-p11">50.0</span>Hz</p>
					<br>
					<p><span data-localize="stove.rate2">当前频率：</span><span class="s-p12">50.0</span>Hz</p>
					<p><span data-localize="stove.maxrate2">频率设定：</span><span class="s-p13">50.0</span>Hz</p>
				</div>
				<div class="u-temp s-d2"><div class="u-upbox"></div><p>下8</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.4</p></div></div>
				<div class="u-temp s-d3"><div class="u-upbox"></div><p>下9</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.4</p></div></div>
				<div class="u-temp s-d4"><div class="u-upbox"></div><p>下10</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.4</p></div></div>
				<div class="u-temp s-d5"><div class="u-upbox"></div><p>下11</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.4</p></div></div>
				<div class="u-temp s-d6"><div class="u-upbox"></div><p>下12</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.4</p></div></div>
				<div class="u-temp s-d7"><div class="u-upbox"></div><p>下13</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.4</p></div></div>
				<div class="u-temp s-d8"><div class="u-upbox"></div><p>下14</p><div class="tempbar"><p class="maxtemp">250.3</p><p class="mintemp">250.0</p><p class="bottomtemp">250.0</p><p class="endtemp">250.4</p></div></div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.localize.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/language_cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var url = getUrl("stove");
var isFirst = true; 
var si = null;
var request = new GetRequest();
var showval= request.type; 
if ('WebSocket' in window) {
    websocket = new WebSocket(url+'/'+request.line+'/'+request.index);
}else {
    alert('Not support websocket')
}
websocket.onerror = function () {
    $('.u-boxcon').addClass('stop');
	$('.u-handbar').addClass('stop');
    $('.u-box4').addClass('stop');
    $('.u-box3').addClass('break');
};

websocket.onopen = function (event) {
    $('.u-boxcon').removeClass('stop');
	$('.u-handbar').removeClass('stop');
    $('.u-box4').removeClass('stop');
    $('.u-box3').removeClass('break');
}
function addanimate(obj){
    for (var i = 0; i < obj.length; i++) {
       (function(i){
            if (obj[i].isPause == 0){
                $('.u-box'+obj[i].stack_index).parent().addClass('moveright'); 
            }
       })(i); 
    }
}
websocket.onmessage = function (event) {
	$('#u-boxe').addClass('moveright');
    si = JSON.parse(event.data.replace(/\bNaN\b/g, "null"));
    console.log(si);
    if (isFirst) {
    	count(si.stack_list,4);
		isFirst = false;
    }
    addanimate(si.stack_list);
    changeColor($('.t-status'),si.p2);
    errorRender();
    cacheRender();
    $('.u-stovebox').html(si.p7);
    $('.s-p5').html(si.p5);
    $('.s-p6').html(si.p6);
    $('.s-p7').html(si.p7);
    $('.s-p8').html(si.p8);
    $('.s-p9').html(si.p9);
    $('.s-p10').html(si.p10);
    $('.s-p11').html(si.p11);
    $('.s-p12').html(si.p12);
    $('.s-p13').html(si.p13);
    for (var i = 1; i < 14; i++) {
	   (function(i){
	        $('.s-u'+i).find('.maxtemp').html(si["u"+i+"_ut"]);
	        $('.s-u'+i).find('.mintemp').html(si["u"+i+"_dt"]);
	        $('.s-d'+i).find('.maxtemp').html(si["d"+i+"_ut"]);
	        $('.s-d'+i).find('.mintemp').html(si["d"+i+"_dt"]);
	        var uhigh = 220*Math.abs(1000)/1000;
	        var dhigh = 220*Math.abs(1000)/1000;
	        $('.s-u'+i).find('.tempbar').css("height",uhigh);
	        $('.s-d'+i).find('.tempbar').css("height",dhigh);
	        if (si["u"+i+"_sts"] == 0) {
	        	$('.s-u'+i).find('.u-upbox').addClass('rest');
	        }else{
	        	$('.s-u'+i).find('.u-upbox').removeClass('rest');
	        }
	        if (si["d"+i+"_sts"] == 0) {
	        	$('.s-d'+i).find('.u-upbox').addClass('rest');
	        }else{
	        	$('.s-d'+i).find('.u-upbox').removeClass('rest');
	        }
	   })(i); 
	}
	// var index = si.cache_list.length - 1;
	// if (index >= 0) {
	// 	$('.u-cachelist').prepend('<div class="u-cacheinfo">'+si.cache_list[index].silicon_id+'</div>');
	// }
	
	// if (si.cache_list.length >= 28) {
	// 	$('.u-cachelist .u-cacheinfo:last-child').remove();
	// }
}
window.onbeforeunload = function(){
	websocket.close();
}  
document.getElementById('u-boxe').addEventListener("webkitAnimationIteration", function(){
	reset();
	count(si.stack_list,4);
	$('.u-boxcon').removeClass('moveright');
}, false); 
</script>
</body>
</html>